<template>
	<view>
    <view class="content">
       <view class="w-header-order">
           <view class="title-box">
              <image class="img-w" src="http://t2.58cdn.com.cn/bidding/big/n_v2a506600bdd204782ba47860733d827f6.jpg" />
              <view class="title">战斗天使阿丽塔</view>
              <view class="time">今天 10:25(2D 国语)</view>
              <view class="time">UME影城（重庆沙坪坝店）</view>
              <view class="next-box">
                <text class="maxi">6号IMAX厅</text> <text class="tip-number">2张</text>
              </view>
              <view class="next-boxc">
                <text class="next-cat">A排 16号  B排 17号</text>
              </view>
           </view>
           <view class="tip-box">
               <view class="right-box">有效期</view>
               <view class="right-time">2020.12.24</view>
               <view class="title">你正在享受特权</view>
               <view class="c-text">全年无限次观影  全年无限次观影</view>
           </view>
           <view class="left-rab"></view>
           <view class="right-rab"></view>
       </view>
       <view class="next-context-box">
          <view class="ipt-box">兑换券</view>
          <view class="ipt-box">活动与优惠</view>
          <view class="ipt-box">手机短信取票码</view>          
          <view class="ipt-box">购买须知</view>
           <view class="ipt-text">
          1.《闪电退税授权服务协议》、《工商银行数据使用授权协议》被放置在同一文档中进行签约的目的在于尽可能减少协议展示所占用的系统空间，
          这种协议展现形式并不影响您签约后根据不同协议所享有的权利及需要履行的义务，您对此不持异议。<Br/><Br/>
          2.您同意并理解，就重庆卓程旅游服务有限公司和卓程旅游第三方关联公司（以下简称“卓程旅游”、“我们”）                          
           </view>
       </view>
    </view>
    <view class="w-footer-order"> 
         <text class="price-box">需支付:<text class="unitxt">￥</text><text class="price">40</text></text>
        <view class="btn-pay" @click="btnBuy">确认支付</view>
    </view>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
	export default {
	components: {
		iconArrow
  },
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
      btnBuy(item){
				this.$api.goPage('/pages/index/ticket');
      },
		}
	}
</script>

<style  lang="scss" scoped>
.content{
	overflow-y:scroll;
  height: 100vh;
  background-color: #fff;
  padding-bottom: px2vw(80);
}
.w-header-order{
  height: px2vw(247);
  width: 100%;
  padding: px2vw(10) 0 px2vw(10) 0;
  background-color: #eee;
  position: relative;
  .right-rab,
  .left-rab{
    position: absolute;
    background-color: #eee;
    left: px2vw(10);
    height: px2vw(15);
    width: px2vw(15);
    border-radius: px2vw(15);
    bottom: px2vw(80);
  }
  .right-rab{
     left: auto;
     right: px2vw(10);
  }
   .title-box{
     margin: 0 auto;
     width: px2vw(345);
     height:px2vw(170);
     background-color: #fff;
     border-top-left-radius: px2vw(10);
     border-top-right-radius: px2vw(10);
     position: relative;
     .img-w{
       width: px2vw(92);
       height: px2vw(126);
       position: absolute;
       top: px2vw(23);
       left: px2vw(18);
     }
     .time,
     .next-boxc,
     .next-box,
     .title{
       padding-left: px2vw(130);
     }
      .title{
       font-size: px2vw($fz18);
       font-weight: 600;
       padding-top: px2vw(20);
     }
     .time{
       font-size: px2vw($fz14);
       color: #999;
       padding-top: px2vw(2);
     }
     .next-box{
        padding-top: px2vw(5);
        margin-top:  px2vw(10);
     }
     .maxi{
          font-size: px2vw($fz16);
          color: #F24244;
          border: px2vw(1.2) solid #F24244;
          text-align: center;
          border-radius: px2vw(5); 
          padding: px2vw(2) px2vw(10);
     }
     .tip-number{
       font-size: px2vw($fz16);
       padding-left: px2vw(10);
     }
     .next-cat{
          font-size: px2vw($fz14);
          color: #F24244;
          text-align: center;
			}
   }
   .tip-box{
     width: px2vw(345);
     height:px2vw(70);
     margin: 0 auto;
     background-color: #f7ebd0;
     border-top: px2vw(1) dashed #ddd;
     color: #BC994D;
     font-size: px2vw($fz14);
     text-indent: px2vw(18);
     padding-top: px2vw(15);
     position: relative;
     .title{
       font-weight: 600;
     }
      .c-text{
       padding-top: px2vw(10);
     }
     .right-box{
       position: absolute;
       height: px2vw(20);
       line-height: px2vw(20);
       width: px2vw(60);
       right: px2vw(15);
       top: px2vw(15);
       border: px2vw(1) solid #EFDEBA;
       text-align: center;
       font-weight: 600;
       color: #BC994D;
        text-indent: 0;
       background-color: #fff;
     }
      .right-time{
       position: absolute;
       height: px2vw(20);
       line-height: px2vw(20);
       right: px2vw(15);
       top: px2vw(50);
       color: #BC994D;
       text-indent: 0;
       font-size: px2vw($fz12);
     }
   }
}
.next-context-box{
  width: px2vw(305);
  margin: 0 auto;
  background-color: #fff;
  min-height: 100;
   .ipt-box{
     height: px2vw(50);
     line-height: px2vw(50);
     position: relative;
     border-bottom:px2vw(1) solid #eee;
     font-size: px2vw($fz14);
     color: #333;
   }
   .ipt-text{
     font-size: px2vw($fz14);
     color: #999;
     padding:px2vw(10) 0;
   }
}
.w-footer-order{
  position: fixed;
  height: px2vw(60);
  line-height: px2vw(60);
  font-size: px2vw($fz14);
  background-color: #fff;
  bottom: 0;
  z-index: 999;
  width: 100%;
  border-top: px2vw(1) solid #ddd;
  .price-box{
    padding-left: px2vw(15);
    font-weight: 600;
  }
  .unitxt,
   .price{
    color:#F24244;
    font-size: px2vw($fz14);
  }
  .price{
    font-size: px2vw($fz18);
  }
  .btn-pay{
    background-color: #F24244;
    height:px2vw(38);
    line-height:px2vw(38);
    width: px2vw(130);
    text-align: center;
    color: #fff;
    border-radius: px2vw(20);
    font-size: px2vw($fz16);
    position: absolute;
    right: px2vw(20);
    top: 50%;
    margin-top: - px2vw(19);
  }
}
</style>
